<%@page import="com.xnx3.j2ee.Global"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://www.xnx3.com/java_xnx3/xnx3_tld" prefix="x"%>
<%@ taglib prefix="shiro" uri="http://shiro.apache.org/tags"%>
<jsp:include page="/wm/common/head.jsp">
	<jsp:param name="title" value="首页" />
</jsp:include>

</form>
<style>
body {
	background-color: #f7f7f7;
}

.to_ul {
	display: flex;
	justify-content: space-between;
	align-content: center;
	align-items: center;
	width: 90vw;
	margin: 20px auto 20px;
}

.to_li {
	width: 17vw;
	height: 10vw;
	display: flex;
	justify-content: center;
	align-content: center;
	align-items: center;
	flex-wrap: wrap;
	border-radius: 10px;
	color: #fff;
}

.to_lti {
	width: 100%;
	text-align: center;
	margin-bottom: 10px;
	font-size: 16px;
}

.bc1 {
	background-color: #f86263;
}

.bc2 {
	background-color: #fca956;
}

.bc3 {
	background-color: #1b9cfc;
}

.bc4 {
	background-color: #58d259;
}

.bc5 {
	background-color: #c24ff1;
}

.to_lbto {
	width: 100%;
	text-align: center;
	font-size: 24px;
}

.cbox {
	width: 90vw;
	margin: 0 auto 30px;
	display: flex;
	justify-content: space-between;
}

.ddctn {
	border-radius: 10px;
	background-color: #fff;
	box-sizing: border-box;
	padding: 20px;
	flex: 0 0 auto;
	width: 54%;
	display: flex;
	flex-wrap: wrap;
}

.ctnr {
	border-radius: 10px;
	background-color: #fff;
	box-sizing: border-box;
	padding: 20px;
	flex: 0 0 auto;
	width: 44%;
	position: relative;
	align-content: center;
	align-items: center;
	justify-content: space-between;
}

.ctbox {
	display: flex;
	width: 100%;
}

.ctlt {
	font-size: 17px;
	font-weight: 600;
	width: 100%;
}

.ctlbox {
	flex: 1;
}

.ouq {
	border: 6px solid #e5e9f2;
	border-radius: 7.2vw;
	box-sizing: border-box;
	text-align: center;
	line-height: 20px;
	margin: auto;
	width: 8vw;
	height: 8vw;
	display: flex;
	justify-content: center;
	align-content: center;
	align-items: center;
}

.ctltil {
	margin-top: 6vw;
	margin-bottom: 20px;
	padding-left: 35%;
}

.ctlnum {
	font-size: 56px;
	padding-left: 35%;
}

.btam {
	width: 90vw;
	margin: 0 auto 40px;
	box-sizing: border-box;
	padding: 20px;
	background-color: #fff;
	border-radius: 10px;
}

.btul {
	display: flex;
	justify-content: space-between;
	margin: 40px 0 20px;
}

.tes {
	position: absolute;
	width: 100%;
	top: 80px;
}

.ola {
	display: flex;
}

.olptibox {
	margin-left: 40px;
	border-radius: 20px;
	background-color: #f7f7f7;
	display: flex;
}

.uio {
	font-size: 12px;
	color: #666;
	font-weight: 500;
	width: 100px;
	display: flex;
	justify-content: center;
	align-content: center;
	align-items: center;
	padding: 6px 0;
	line-height: 12px;
	border-radius: 20px;
}

.qosi1 {
	height: 200px;
}

.qosi2 {
	height: 200px;
}

@media screen and (max-width: 1500px) {
	.qosi1 {
		height: 200px;
	}
	.qosi2 {
		height: 160px;
	}
}

@media screen and (max-width: 1100px) {
	.qosi1 {
		height: 180px;
	}
	.qosi2 {
		height: 120px;
	}
}

.olkco {
	background-color: #58d259;
	color: #fff;
}
</style>

<div>
	<div class="to_ul">
		<div class="to_li bc1">
			<div class="to_lti">总用户数(个)</div>
			<div class="to_lbto">${userCount}</div>
		</div>
		<div class="to_li bc2"
			onclick="window.location.href='/wangge/order/list.jsp'">
			<div class="to_lti">总订单数(笔)</div>
			<div class="to_lbto">${orderCount}</div>
		</div>
		<div class="to_li bc3"
			onclick="window.location.href='/wangge/order/list.jsp'">
			<div class="to_lti">总成交额(元)</div>
			<div class="to_lbto">${moneySum}</div>
		</div>
		<div class="to_li bc4"
			onclick="window.location.href='/wangge/order/list.jsp'">
			<div class="to_lti">总回收量(kg)</div>
			<div class="to_lbto">${allSum}</div>
		</div>
		<div class="to_li bc5"
			onclick="window.location.href='/wangge/daishoudian/list.do'">
			<div class="to_lti">总回收点(个)</div>
			<div class="to_lbto">${storeCount}</div>
		</div>
	</div>
	<div class="cbox">
		<div class="ddctn">
			<div class="ctlt">今日订单</div>
			<div class="ctbox">
				<div class="ctlbox"
					onclick="window.location.href='/wangge/order/list.jsp'">
					<div class="ctltil">订单总量</div>
					<div class="ctlnum">${ordernowCount}</div>
				</div>
				<div
					style="width: 62%; position: relative; margin-right: 2%; padding-right: 3%;">
					<div style="display: flex; justify-content: space-between;">
						<div style="width: 33%;"
							onclick="window.location.href='/wangge/order/list.jsp'">
							<div class="ouq">${waitingCount}</div>
							<div style="text-align: center; margin-top: 10px;">服务中</div>
						</div>
						<div style="width: 33%;"
							onclick="window.location.href='/wangge/order/list.jsp'">
							<div class="ouq">${cancelledCount}</div>
							<div style="text-align: center; margin-top: 10px;">已取消</div>
						</div>
						<div style="width: 33%;"
							onclick="window.location.href='/wangge/order/list.jsp'">
							<div class="ouq">${doneCount}</div>
							<div style="text-align: center; margin-top: 10px;">已完成</div>
						</div>
					</div>
					<div
						style="display: flex; justify-content: center; margin: 30px 0px 20px;">
						<div style="width: 40%;"
							onclick="window.location.href='/wangge/order/list.jsp'">
							<div class="ouq">${doorCount}</div>
							<div style="text-align: center; margin-top: 10px;">
								即将超时（临近30分钟）</div>
						</div>
						<div style="width: 40%;"
							onclick="window.location.href='/wangge/order/notTakenList.jsp'">
							<div class="ouq">${chaoshiCount}</div>
							<div style="text-align: center; margin-top: 10px;">已超时</div>
						</div>

					</div>
				</div>
			</div>
		</div>
		<div class="ctnr">
			<div
				style="position: absolute; width: 100%; top: 20px; left: 20px; font-size: 17px; font-weight: 600;">订单评价</div>
			<div class="qosi1" id="container" style="flex: 1; width: 100%;"></div>
			<div class="qosi2" id="containerfbhx" style="flex: 1;"></div>


		</div>

	</div>
	<div class="btam">
		<div class="ctlt ola">
			实时数据
			<div class="olptibox">
				<div class="uio olkco" id="ka1">今日</div>
				<div class="uio" id="ka2">昨日</div>
			</div>
		</div>
		<div class="btul" id="q1">
			<div style="text-align: center;">
				<div>新增用户(个)</div>
				<div style="font-size: 20px; color: #f55a48; margin-top: 10px;">${usernowCount}</div>
			</div>
			<div style="text-align: center;"
				onclick="window.location.href='/wangge/order/list.jsp'">
				<div>新增订单(笔)</div>
				<div style="font-size: 20px; color: #ff9e41; margin-top: 10px;">${doneorderCount}</div>
			</div>
			<div style="text-align: center;"
				onclick="window.location.href='/wangge/order/list.jsp'">
				<div>成交金额(元)</div>
				<div style="font-size: 20px; color: #4e97ed; margin-top: 10px;">${moneynowSum}</div>
			</div>
			<div style="text-align: center;"
				onclick="window.location.href='/wangge/order/list.jsp'">
				<div>回收重量(kg)</div>
				<div style="font-size: 20px; color: #86d535; margin-top: 10px;">${allnowSum}</div>
			</div>
			<div style="text-align: center;"
				onclick="window.location.href='/wangge/daishoudian/list.do'">
				<div>新增回收点(个)</div>
				<div style="font-size: 20px; color: #bb33d1; margin-top: 10px;">${storenowCount}</div>
			</div>
		</div>
		<div class="btul" id="q2">
			<div style="text-align: center;">
				<div>新增用户(个)</div>
				<div style="font-size: 20px; color: #f55a48; margin-top: 10px;">${useryesterdayCount}</div>
			</div>
			<div style="text-align: center;"
				onclick="window.location.href='/wangge/order/list.jsp'">
				<div>新增订单(笔)</div>
				<div style="font-size: 20px; color: #ff9e41; margin-top: 10px;">${doneyesterdayCount}</div>
			</div>
			<div style="text-align: center;"
				onclick="window.location.href='/wangge/order/list.jsp'">
				<div>成交金额(元)</div>
				<div style="font-size: 20px; color: #4e97ed; margin-top: 10px;">${moneyyesterdaySum}</div>
			</div>
			<div style="text-align: center;"
				onclick="window.location.href='/wangge/order/list.jsp'">
				<div>回收重量(kg)</div>
				<div style="font-size: 20px; color: #86d535; margin-top: 10px;">${allyesterdaySum}</div>
			</div>
			<div style="text-align: center;"
				onclick="window.location.href='/wangge/daishoudian/list.do'">
				<div>新增回收点(个)</div>
				<div style="font-size: 20px; color: #bb33d1; margin-top: 10px;">${storeyesterdayCount}</div>
			</div>
		</div>
	</div>
</div>
<script type="text/javascript" src="/js/echarts.min.js"></script>

<script type="text/javascript">


$("#q2").hide()
$("#ka1").click(function() {
	$("#ka1").addClass("olkco")
	$("#ka2").removeClass("olkco")
	$("#q2").hide()
	$("#q1").show()
})
$("#ka2").click(function() {
	$("#ka2").addClass("olkco")
	$("#ka1").removeClass("olkco")
	$("#q1").hide()
	$("#q2").show()
})
var haopingCount = ${haopingCount};
var chapingCount = ${chapingCount};
var qitaCount = ${qitaCount};
/******* 订单评价柱状图和环形图 ******/
var dom = document.getElementById("container");
var myChart = echarts.init(dom);
var app = {};
var option;
const waterMarkText = 'ECHARTS';
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
canvas.width = canvas.height = 100;
ctx.textAlign = 'center';
ctx.textBaseline = 'middle';
ctx.globalAlpha = 0.08;
ctx.font = '20px Microsoft Yahei';
ctx.translate(50, 50);
ctx.rotate(-Math.PI / 4);
ctx.fillText(waterMarkText, 0, 0);
option = {
  backgroundColor: {
    type: 'pattern',
    repeat: 'repeat'
  },
  tooltip: {
     trigger: 'item',
     formatter: '{a} <br/>{b}: {c}'
  },
  color: ["#FF6347", "#ff9e41", "#1E90FF"],
  legend: {
    data: ['好评', '差评', '其他']
  },
  grid: [
    {
      height: 120,
      top: 50,
      width: '57%',
      bottom: '1%',
      left: 5,
      containLabel: true
    },
  ],
  xAxis: [
    {
      type: 'value',
      gridIndex: 0,
      splitLine: {
        show: false
      }
    },
  ],
  yAxis: [
    {
      gridIndex: 0,
      type: 'category',
      inverse: true,
      data: ['单数'],
      axisLabel: {
        interval: 0,
        rotate: 30
      },
      splitLine: {
        show: false
      }
    },
  ],
  series: [
    {
  	  itemStyle : {
			//柱形图圆角，鼠标移上去效果，如果只是一个数字则说明四个参数全部设置为那么多
		normal : {
			
				//柱形图圆角，初始化效果
			barBorderRadius : [ 0, 5, 5, 0 ]
		}
	  },
	  
      name:'好评',
      type: 'bar',
      barWidth: 20,
      label: {
        position: 'right',
        show: false
      },
      data: [haopingCount]
    },
    {
  	  itemStyle : {
			//柱形图圆角，鼠标移上去效果，如果只是一个数字则说明四个参数全部设置为那么多
		normal : {
				//柱形图圆角，初始化效果
			barBorderRadius : [ 0, 5, 5, 0 ]
		}
	  },
      name:'差评',
      type: 'bar',
      barWidth: 20,
      label: {
        position: 'right',
        show: false
      },
      data: [chapingCount]
    },
    {
	  itemStyle : {
			//柱形图圆角，鼠标移上去效果，如果只是一个数字则说明四个参数全部设置为那么多
		normal : {
				//柱形图圆角，初始化效果
			barBorderRadius : [ 0, 5, 5, 0 ]
		}
	  },
      name:'其他',
      type: 'bar',
      barWidth: 20,
      label: {
        position: 'right',
        show: true
      },
      data: [qitaCount]
    },
    {
      tooltip: {
        trigger: 'item',
        formatter: '{b}:<br> {c} ({d}%)'
      },
      type: 'pie',
      radius: [20, '40%'],
      center: ['80%', 100],
      itemStyle: {
          normal: {
             labelLine: {
          	 length: 0
      		}
       	 }
      },
      data: [
        {
          name: '好评',
          value: [haopingCount]
        },
        {
          name: '差评',
          value: [chapingCount]
        },
        {
          name: '其他',
          value: [qitaCount]
        }      
      ]
    },
    
  ]
};
if (option && typeof option === 'object') {
    myChart.setOption(option);
}
/******* 订单分布环形图 ******/
var feizhi = (${feizhi}/1000).toFixed(2);
var suliao = (${suliao}/1000).toFixed(2);
var jinshu = (${jinshu}/1000).toFixed(2);
var jiuyiwu = (${jiuyiwu}/1000).toFixed(2);
var jiayongdianqi = (${jiayongdianqi}/1000).toFixed(2);
var shoujishuma = (${shoujishuma}/1000).toFixed(2);
var gongyeshebei = (${gongyeshebei}/1000).toFixed(2);
var jianzhucailiao = (${jianzhucailiao}/1000).toFixed(2);
var xiangjiao = (${xiangjiao}/1000).toFixed(2);
var pinglei = (${pinglei}/1000).toFixed(2);
var dom = document.getElementById("containerfbhx");
var myChart = echarts.init(dom);
var app = {};
var option;
optionfbhx = {
  tooltip: {
    trigger: 'item'
  },
  legend: {
		orient: "horizontal",
		x: "50%",
		y: "center",
		textStyle: {
            "fontSize": 11
        },
		data: ['废纸', '塑料', '金属', '旧衣物', '家用电器', '手机数码', '工业设备', '建筑材料', '橡胶', '瓶类']
	},
  series: [
    { color: ['#5470C6', '#EE6666','#4bc0d6','#93c47d','#ff00ff','#d2691e','#4bc54b','#e31e1e','#ffd966', "#ff9e41"],
      name: '订单重量(kg)',
      type: 'pie',
      radius: [0, '60%'],
      center: ['20%', '60%'],
      avoidLabelOverlap: false,
      label: {
        show: false,
        position: 'center'
      },
      
      emphasis: {
        label: {
          show: true,
          fontSize: '40',
         fontWeight: 'bold',
       }
      },
      label: {
			normal: {
				show: false,
			},
		},
		labelLine: {
			normal: {
				show: false
			}
		},
      data: [
        { value: feizhi, name: '废纸' },
        { value: suliao, name: '塑料' },
        { value: jinshu, name: '金属' },
        { value: jiuyiwu, name: '旧衣物' },
        { value: jiayongdianqi, name: '家用电器' },
        { value: shoujishuma, name: '手机数码' },
        { value: gongyeshebei, name: '工业设备' },
        { value: jianzhucailiao, name: '建筑材料' },
        { value: xiangjiao, name: '橡胶' },
        { value: pinglei, name: '瓶类' }
      ]
    }
  ]
};

if (option && typeof option === 'object') {
    myChart.setOption(optionfbhx);
}


</script>

<jsp:include page="/wm/common/foot.jsp"></jsp:include>